<template>
 	  <div class="index">
 	    <Header ></Header>
 	    
 	    <div class="main">
 	      <p class='current-nav'>当前位置 : <router-link to='index'>首页</router-link> <i> > </i>修改密码</p>
 	      <div class="infor personset"
 	           style="margin-bottom:0;">
 	        <p class="title">修改密码</p>
 	
 	        <div class="form-container">
 	
 	          <el-form :model="ruleForm"
 	                   :rules="rules"
 	                   ref="ruleForm"
 	                   label-width="184px"
 	                   class="demo-ruleForm">
 	            <el-form-item label="账号 :">
 	              <el-input v-model="ruleForm.userAccount"
 	                        disabled></el-input>
 	            </el-form-item>
 	            <el-form-item label="手机号 :"
 	                          prop="mobileNo">
 	              <el-input v-model="ruleForm.mobileNo"></el-input>
 	            </el-form-item>
 	            <el-form-item label="手机验证码 :"
 	                          prop="smsCode">
 	              <el-input v-model="ruleForm.smsCode"
 	                        style='width:238px;'></el-input>
 	              <el-button style='color:#9f90ef;'
 	                         @click="getCode"
 	                         v-show="codeFlag">点击获取</el-button>
 	              <el-button style='color:#666;background:#ccc;cursor:no-drop;'
 	                         id="smsCode"
 	                         v-show="!codeFlag">点击获取</el-button>
 	            </el-form-item>
 	            <el-form-item label="旧密码 :"
 	                          prop="oldPasswd">
 	              <el-input v-model="ruleForm.oldPasswd"
 	                        type='password'></el-input>
 	            </el-form-item>
 	            <el-form-item label="新密码 :"
 	                          prop="newPasswd">
 	              <el-input v-model="ruleForm.newPasswd"
 	                        type='password'></el-input>
 	            </el-form-item>
 	            <el-form-item label="确认密码 :"
 	                          prop="newPasswd2">
 	              <el-input v-model="ruleForm.newPasswd2"
 	                        type='password'></el-input>
 	            </el-form-item>
 	
 	          </el-form>
 	          <div class="bts">
 	            <el-button type="primary"
 	                       @click="submitForm('ruleForm')"
 	                       class='sure'>保存</el-button>
 	            <el-button @click="resetForm('ruleForm')"
 	                       class='cancel'>取消</el-button>
 	          </div>
 	        </div>
 	      </div>
 	    </div>
 	    <Footer />
 	  </div>
 	</template>
 	
 	<script>
 	import Header from '../common/header2'
 	import Footer from '../common/footer'
 	import config from "../../config.js"
 	export default {
 	  components: {
 	     Header,
 	    Footer
 	  },
 	  data () {
 	    var checkPhone = (rule, value, callback) => {
 	      if (!value) {
 	        return callback(new Error("手机号不能为空"));
 	      } else {
 	        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
 	        console.log(reg.test(value));
 	        if (reg.test(value)) {
 	          callback();
 	        } else {
 	          return callback(new Error("请输入正确的手机号"));
 	        }
 	      }
 	    }
 	    var checknewPasswd = (rule, val, callback) => {
 	      console.log(val)
 	      if (!val) {
 	        return callback(new Error('新密码不能为空'))
 	      } else if (!/^[0-9A-Za-z]{6,}$/.test(val)) {
 	        return callback(new Error('至少输入6个以上的数字或字母'))
 	      } else if (this.ruleForm.newPasswd == this.ruleForm.oldPasswd) {
 	        return callback(new Error('新密码不能和原密码相同'))
 	      } else {
 	        callback()
 	      }
 	    }
 	    var checknewPasswd2 = (rule, val, callback) => {
 	      if (!val) {
 	        return callback(new Error('新密码不能为空'))
 	      }
 	      if (this.ruleForm.newPasswd != this.ruleForm.newPasswd2) {
 	        return callback(new Error('两次密码输入不一致'))
 	      }
 	      callback()
 	    }
 	    return {
 	      uploadFlag: false,
 	      codeFlag: true,
 	      time: null,
 	      flag:true,
 	      ruleForm: {
 	        userAccount: '',
 	        mobileNo: '',
 	        smsCode: '',
 	        oldPasswd: '',
 	        newPasswd: '',
 	        newPasswd2: ''
 	      },
 	      rules: {
 	        oldPasswd: [
 	          { required: true, message: "请输入原密码", trigger: "blur" }
 	        ],
 	        newPasswd: [
 	          { required: true, message: "请输入新密码", trigger: "blur" },
 	          {
 	            required: true,
 	            validator: checknewPasswd,
 	            trigger: "blur"
 	          }
 	        ],
 	        newPasswd2: [
 	          { required: true, message: "请再次输入新密码", trigger: "blur" },
 	          {
 	            required: true,
 	            validator: checknewPasswd2,
 	            trigger: "blur"
 	          }
 	        ],
 	        mobileNo: [
 	          { required: true, message: "请输入手机号", trigger: "blur" },
 	          {
 	            required: true,
 	            validator: checkPhone,
 	            trigger: "blur"
 	          }
 	        ],
 	        smsCode: [
 	          { required: true, message: "请输入手机验证码", trigger: "blur" }
 	        ]
 	      }
 	    }
 	
 	  },
 	  mounted () {
 	    this.ruleForm.userAccount = JSON.parse(localStorage.user).userAccount
 	  },
 	  created () {
 	
 	  },
 	  methods: {
 	    getCode () {
 	      this.codeFlag = false;
 	      var reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
 	      if (reg.test(this.ruleForm.mobileNo)) {
 	        var t = 30;
 	        this.time = setInterval(() => {
 	          t--;
 	          if (t != 0) {
 	            document.getElementById("smsCode").innerHTML = t + "s";
 	          } else {
 	            t = 0;
 	            clearInterval(this.time);
 	            this.codeFlag = true;
 	          }
 	        }, 1000);
 	        this.$axios.post(config.baseUrl + "emergency/v1.0/sms/verifyCode", {
 	          mobileNo: this.ruleForm.mobileNo
 	        })
 	          .then(res => {
 	            if (res.data.meta.success) {
 	              this.$message.success(res.data.data.verifySuccess);
 	            } else {
 	              this.$message.warning(res.data.meta.message);
 	            }
 	          })
 	          .catch(response => {
 	            console.log(response);
 	          });
 	      } else {
 	        this.$message.warning("请输入正确的手机号");
 	      }
 	    },
 	    success (res) {//来自子组件 上传成功 关闭弹窗
 	      this.uploadFlag = false
 	    },
 	    submitForm () {
 	      let params = {
 	        mobileNo: this.ruleForm.mobileNo,
 	        newPasswd: this.$md5(this.ruleForm.newPasswd),
 	        oldPasswd: this.$md5(this.ruleForm.oldPasswd),
 	        smsCode: this.ruleForm.smsCode,
 	        userAccount: this.ruleForm.userAccount
 	      }
 	      this.$axios.post(config.baseUrl + 'emergency/v1.0/modify/password', params)
 	        .then((res) => {
 	          // console.log(res)
 	          if (res.data.meta.success) {
 	            this.$message.success(res.data.meta.message);
 	            this.$router.push('login')
 	          } else {
 	            this.$message.warning(res.data.meta.message)
 	          }
 	
 	        }).catch((response) => {
 	          console.log(response);
 	        })
 	    },
 	    resetForm (formName) {
 	      this.$refs[formName].resetFields();
 	    }
 	  }
 	}
 	</script>
 	
 	<!-- Add "scoped" attribute to limit CSS to this component only -->
 	<style lang='less'>
 	@import "../../../static/css/information.less";
 	.personset {
 	  .form-container {
 	    width: 766px;
 	    padding: 0 0 70px;
 	    margin: 0 auto;
 	    .el-form {
 	      margin-top: 34px;
 	    }
 	    .el-button {
 	      width: 118px;
 	      height: 42px;
 	      border-radius: 8px;
 	    }
 	    .el-input {
 	      width: 360px;
 	    }
 	  }
	 }
 	</style>
	 <style lang='less' scoped>
	 	.index{
			 .main{
				 padding-top: 100px;
			 }
		 }
	 </style>